/**
 * Author: Shen Yanqiu
 * Date: 2017-12-08
 * Time: 14:45
 *
 */
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Button, Row, Col, Form, Input, Select, message, } from 'antd';
import { config } from 'utils';
import { Page } from 'components';
import styles from './index.less';

const Option = Select.Option;
class Register extends React.Component {
  static propTypes = {
    form: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
    register: PropTypes.object,
  };

  constructor (props) {
    super(props);
    this.state = {};
  }
  // 验证两次密码是否一致
  checkPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('');
    } else {
      callback();
    }
  }
  checkConfirm = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }

  render () {
    const {
      loading,
      dispatch,
      register,
      form: {
        getFieldDecorator,
        validateFieldsAndScroll,
        getFieldValue,
        validateFields,
      },
    } = this.props;

    // 获取手机号码 进行发送验证
    const getCode = () => {
      validateFields(["mobile"],(error, values) => {
        if (error){
          return ;
        }
        const params = { mobile: values.mobile }
        if (values.mobile){
          dispatch({ type: 'register/getCode', payload: params });
        }
      });
    };
    // 点击注册
    const handleOK = () => {
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          return;
        }
        values.code = Number(values.code);
        dispatch({ type: 'register/doRegister', payload: values });
      });
    };
    // 学校数据
    const { school } = register;

    return (
        <div className={styles.form}>
          <div className={styles.logo}>
            <img alt={'logo'} src={config.logo} />
            <span>{config.name}</span>
          </div>
          <form>
            <Form.Item hasFeedback>
              {getFieldDecorator('mobile', {
                rules: [
                  {
                    len: 11,
                    message: "请输入11位手机号",
                  },
                  {
                    pattern: /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/,
                    message: "请输入正确！",
                  }
                ],
              })(<Input size="large" onPressEnter={handleOK} placeholder="手机号" />)}
            </Form.Item>
            <Form.Item>
              <Row gutter={8}>
                <Col span={13}>
                  {getFieldDecorator('code', {
                    rules: [{ required: true, whitespace: true, message: '验证码不能为空！' }],
                  })(
                    <Input placeholder="验证码" />
                  )}
                </Col>
                <Col span={11}>
                  <Button type="primary" onClick={getCode} loading={loading.effects['register/getCode']}>获取验证码</Button>
                </Col>
              </Row>
            </Form.Item>
            <Row gutter={10}>
              <Col span={10}>
                <Form.Item hasFeedback>
                  {getFieldDecorator('firstName', {
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: "姓不能为空！",
                      },
                    ],
                  })(<Input size="large" onPressEnter={handleOK} placeholder="请输入姓" />)}
                </Form.Item>
              </Col>
              <Col span={14}>
                <Form.Item hasFeedback>
                  {getFieldDecorator('lastName', {
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: "名不能为空！",
                      },
                    ],
                  })(<Input size="large" onPressEnter={handleOK} placeholder="请输入名" />)}
                </Form.Item>
              </Col>
            </Row>
            <Form.Item hasFeedback>
              {getFieldDecorator('password', {
                rules: [
                  {
                    required: true,
                    message: "密码不能为空！",
                  },
                  {
                    min: 6,
                    message: "密码不能少于6位！",
                  }, {
                    validator: this.checkConfirm,
                  },
                ],
              })(<Input size="large" type="password" onPressEnter={handleOK} placeholder="密码" />)}
            </Form.Item>
            <Form.Item hasFeedback>
              {getFieldDecorator('confirmPassword', {
                rules: [
                    {
                      required: true,
                      message: "确认密码不能为空！",
                    },{
                    validator: this.checkPassword,
                    message: "两次密码不一致！",
                  },
                ],
              })(<Input size="large" type="password" onPressEnter={handleOK} placeholder="确认密码" />)}
            </Form.Item>
            <Form.Item hasFeedback>
              {getFieldDecorator('school', {
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: "学校不能为空！",
                  },
                ],
              })(<Select placeholder="请选择" onPressEnter={handleOK} className={styles.selectWidth}>
                {
                  school.List &&
                  school.List.map((item,index) => (
                    <Option key={index} value={item.ID}>{item.Name}</Option>
                  ))
                }
                {/*<Option value="5a1926eaa0110f0a49d7e6ae">成都东软学院</Option>*/}
              </Select>)
              }
            </Form.Item>
            <Row>
              <Button type="primary" size="large" onClick={handleOK} loading={loading.effects['register/doRegister']}>
                注册
              </Button>
            </Row>
          </form>
        </div>
    );
  }
}

export default connect(({ loading, register }) => ({ loading, register }))(Form.create({})(Register));
